<template>
  <view class="u-select">
    <u-popup
      :blur="blur"
      :maskCloseAble="maskCloseAble"
      mode="bottom"
      :popup="false"
      v-model="popupValue"
      length="auto"
      :safeAreaInsetBottom="safeAreaInsetBottom"
      @close="close"
      :z-index="uZIndex"
    >
      <view class="u-select">
        <view class="u-select__header" @touchmove.stop.prevent="">
          <view
            class="u-select__header__cancel u-select__header__btn"
            :style="{ color: cancelColor }"
            hover-class="u-hover-class"
            :hover-stay-time="150"
            @tap="getResult('cancel')"
          >
            {{ cancelText }}
          </view>
          <view class="u-select__header__title">
            {{ title }}
          </view>
          <view
            class="u-select__header__confirm u-select__header__btn"
            :style="{ color: confirmColor }"
            hover-class="u-hover-class"
            :hover-stay-time="150"
            @touchmove.stop=""
            @tap.stop="getResult('confirm')"
          >
            {{ confirmText }}
          </view>
        </view>
        <view class="u-select__body">
          <scroll-view style="height: 500rpx" scroll-y>
            <view class="u-select__body__picker-view">
              <view
                v-for="item in columnData"
                :key="item[valueName]"
                @click="chooseItem(item)"
                :class="[
                  'u-select__body__picker-view__item',
                  chooseInfo.some((i) => i[valueName] === item[valueName])
                    ? 'active'
                    : '',
                ]"
              >
                <view style="display: flex"
                  >{{ item[labelName] }}
                  <!-- 此处用于，不止显示labelname的地方 -->
                  <slot :data="item" name="content"></slot
                ></view>
                <u-icon
                  v-if="
                    chooseInfo.some((i) => i[valueName] === item[valueName])
                  "
                  size="28"
                  color="#2979FF"
                  name="checkbox-mark"
                ></u-icon>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
/**
 * select 列选择器
 * @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。)
 * @tutorial http://uviewui.com/components/select.html
 * @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
 * @property {Array} list 列数据，数组形式，见官网说明
 * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
 * @property {String} cancel-color 取消按钮的颜色（默认#606266）
 * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
 * @property {String} confirm-text 确认按钮的文字
 * @property {String} cancel-text 取消按钮的文字
 * @property {String} default-value 提供的默认选中的下标，见官网说明
 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
 * @property {String Number} z-index 弹出时的z-index值(默认10075)
 * @property {String} value-name 自定义list数据的value属性名 1.3.6
 * @property {String} label-name 自定义list数据的label属性名 1.3.6
 * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
 * @event {Function} confirm 点击确定按钮，返回当前选择的值
 * @example <u-select v-model="show" :list="list"></u-select>
 */
export default {
  emits: ['update:modelValue', 'input', 'confirm'],
  props: {
    // 通过双向绑定控制组件的弹出与收起
    value: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    // 列数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    // "取消"按钮的颜色
    cancelColor: {
      type: String,
      default: '#606266',
    },
    // "确定"按钮的颜色
    confirmColor: {
      type: String,
      default: '#2979ff',
    },
    // 弹出的z-index值
    zIndex: {
      type: [String, Number],
      default: 0,
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: false,
    },
    // 是否允许通过点击遮罩关闭Picker
    maskCloseAble: {
      type: Boolean,
      default: true,
    },
    // 自定义value属性名
    valueName: {
      type: String,
      default: 'value',
    },
    // 自定义label属性名
    labelName: {
      type: String,
      default: 'label',
    },
    // 顶部标题
    title: {
      type: String,
      default: '',
    },
    // 取消按钮的文字
    cancelText: {
      type: String,
      default: '取消',
    },
    // 确认按钮的文字
    confirmText: {
      type: String,
      default: '确认',
    },
    // 遮罩的模糊度
    blur: {
      type: [Number, String],
      default: 0,
    },
    choosed: {
      type: Array,
      default() {
        return [];
      },
    },
    initChoosed: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      popupValue: false,
      // picker-view的数据
      columnData: [],
      // 上一次列变化时的index
      lastSelectIndex: [],
      chooseInfo: [],
    };
  },
  watch: {
    // 在select弹起的时候，重新初始化所有数据
    value: {
      immediate: true,
      handler(val) {
        if (val) setTimeout(() => this.init(), 10);
        this.popupValue = val;
      },
    },
    modelValue: {
      immediate: true,
      handler(val) {
        if (val) setTimeout(() => this.init(), 10);
        this.popupValue = val;
      },
    },
  },
  computed: {
    uZIndex() {
      // 如果用户有传递z-index值，优先使用
      return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
    },
  },
  methods: {
    init() {
      this.setColumnData();
      this.setSelectValue();
    },
    // 获取需要展示在picker中的列数据
    setColumnData() {
      this.columnData = this.list;
      if (this.initChoosed) {
        this.chooseInfo = [...this.choosed];
      }
    },
    setSelectValue() {},
    // 列选项
    columnChange(e) {},
    close() {
      this.$emit('input', false);
      this.$emit('update:modelValue', false);
    },
    // 点击确定或者取消
    getResult(event = null) {
      if (event) this.$emit(event, [...this.chooseInfo]);
      this.close();
    },
    chooseItem(item) {
      if (
        this.chooseInfo.some((i) => i[this.valueName] === item[this.valueName])
      ) {
        this.chooseInfo = this.chooseInfo.filter(
          (i) => i[this.valueName] !== item[this.valueName]
        );
      } else {
        this.chooseInfo.push(item);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.u-select {
  &__action {
    position: relative;
    line-height: $u-form-item-height;
    height: $u-form-item-height;

    &__icon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transition: transform 0.4s;
      transform: translateY(-50%);
      z-index: 1;

      &--reverse {
        transform: rotate(-180deg) translateY(50%);
      }
    }
  }

  &__hader {
    &__title {
      color: $u-content-color;
    }
  }

  &--border {
    border-radius: 6rpx;
    border-radius: 4px;
    border: 1px solid $u-form-item-border-color;
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    padding: 0 40rpx;
  }

  &__body {
    width: 100%;
    height: 520rpx;
    overflow: hidden;
    background-color: #fff;
    padding-bottom: 20rpx;
    &__picker-view {
      height: 100%;
      box-sizing: border-box;
      // padding: 20rpx;
      &__item {
        line-height: 50rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: $u-main-color;
        padding: 10rpx 28rpx;
        &.active {
          color: #000000d9;
          font-weight: 600;
          background-color: #e6f6ff;
        }
      }
    }
  }
}
</style>
